<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org">
<head>
    <title>Insert title here</title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <title>Hello, Bootstrap Table!</title>
    <meta charset="UTF-8">
    <title>Title</title>
    <script th:src="@{/js/jquery-3.2.1.min.js}"></script>
    <!-- 最新 Bootstrap4 核心 CSS 文件 -->
    <link rel="stylesheet" href="http://cdn.static.runoob.com/libs/bootstrap/3.3.7/css/bootstrap.min.css">
    <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
    <script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
    <!-- bootstrap.bundle.min.js 用于弹窗、提示、下拉菜单，包含了 popper.min.js -->
    <script rel="stylesheet" th:src="@{/js/bootstrap.bundle.min.js} "></script>
    <!-- 最新的 Bootstrap4 核心 JavaScript 文件 -->
    <script	th:src="@{/js/bootstrap.min.js}"rel="stylesheet"> </script>

    <link rel="stylesheet" href="https://cdn.bootcss.com/jquery.bootstrapvalidator/0.5.3/css/bootstrapValidator.min.css">
    <script type="text/javascript" src="https://cdn.bootcss.com/jquery.bootstrapvalidator/0.5.3/js/bootstrapValidator.min.js"></script>
    <script th:src="@{/js/functions.js}"></script>

</head>

<body>
<div class="container-fluid">
    <div class="row-fluid">
        <div class="span12">

<div th:include="../templates/user/top::headtop"></div>
            <div id="myCarousel" class="carousel slide"  style="align-self: center">
                <!-- 轮播（Carousel）指标 -->
                <ol class="carousel-indicators">
                    <li data-target="#myCarousel" data-slide-to="0" class="active"></li>
                    <li data-target="#myCarousel" data-slide-to="1"></li>
                    <li data-target="#myCarousel" data-slide-to="2"></li>
                </ol>

                <!-- 轮播（Carousel）项目 -->
                <div class="carousel-inner">
                    <div class="item active">
                        <img src="/springbootdemo/images/01.png" alt="First slide" style="width:100%;height: 500px">
                    </div>
                    <div class="item">
                        <img src="/springbootdemo/images/02.png" alt="Second slide" style="width:100%;height: 500px">
                    </div>
                    <div class="item">
                        <img src="/springbootdemo/images/03.png" alt="Third slide" style="width:100%;height: 500px">
                    </div>
                </div>
                <!-- 轮播（Carousel）导航 -->
                <a class="left carousel-control" href="#myCarousel" role="button" data-slide="prev">
                    <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
                    <span class="sr-only">Previous</span>
                </a>
                <a class="right carousel-control" href="#myCarousel" role="button" data-slide="next">
                    <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
                    <span class="sr-only">Next</span>
                </a>
            </div>



            <br>
            <br>

            <h3>
                正在热映
            </h3>
            <br>
            <br>
            <div class="row">
                <div th:each="u,stat:${MovieList}" class="col-md-3">
                    <img th:src="${u.film_pic}" style="width: 167px;height: 160px"/>


                    <br>


                    <span th:align="top">[[${u.film_name}]]</span>
                    &nbsp;&nbsp;&nbsp;
                    <span><button class="btn btn-default btn-xs btn-danger btn-primary" th:onclick="Updata([[${u.film_id}]])">查看详情</button></span>
                    <br  th:if="(${stat.index}+1)%4==0">
                </div>

            </div>
            <br>
            <br>
            <h3>
                即将上映
            </h3>
            <br>
            <br>
            <div class="row-fluid">
                <div class="row">
                    <div th:each="u,stat:${MovieList}" class="col-md-3">
                        <img th:src="${u.film_pic}" style="width: 167px;height: 160px"/>


                        <br>


                        <span th:align="top">[[${u.film_name}]]</span>
                        &nbsp;&nbsp;&nbsp;
                        <span><button class="btn btn-default btn-xs btn-danger btn-primary" th:onclick="Updata([[${u.film_id}]])">查看详情</button></span>
                        <br  th:if="(${stat.index}+1)%4==0">
                    </div>

                </div>
                <br>
                <br>
                <div class="span3">
                    <blockquote>
                        <p>
                            ​​热门预告片
                        </p>
                    </blockquote>
                    <ol>
                        <li>
                            <div>
                                拆弹专家2
                            </div>
                        </li>
                        <li>
                            <div>
                                战狼3
                            </div>
                        </li>
                        <li>
                            <div>
                                我和我的家乡
                            </div>
                        </li>
                        <li>
                            <div>
                                一点就到家
                            </div>
                        </li>
                        <li>
                            <div>
                                唐人街探案3
                            </div>
                        </li>
                        <li>
                            <div>
                                数码宝贝：最后的进化
                            </div>
                        </li>
                        <li>
                            <div>
                                蚁人2
                            </div>
                        </li>
                        <li>
                            <div>
                                肖申克的救赎
                            </div>
                        </li>
                    </ol>
                </div>
            </div>
            <script>
                $(function(){
                    // 初始化轮播
                    $(".start-slide").click(function(){
                        $("#myCarousel").carousel('cycle');
                    });
                    // 停止轮播
                    $(".pause-slide").click(function(){
                        $("#myCarousel").carousel('pause');
                    });
                    // 循环轮播到上一个项目
                    $(".prev-slide").click(function(){
                        $("#myCarousel").carousel('prev');
                    });
                    // 循环轮播到下一个项目
                    $(".next-slide").click(function(){
                        $("#myCarousel").carousel('next');
                    });
                    // 循环轮播到某个特定的帧
                    $(".slide-one").click(function(){
                        $("#myCarousel").carousel(0);
                    });
                    $(".slide-two").click(function(){
                        $("#myCarousel").carousel(1);
                    });
                    $(".slide-three").click(function(){
                        $("#myCarousel").carousel(2);
                    });
                });
            </script>

        </div>
    </div>
</div>
<script type="text/javascript">
    function Updata(id) {
        window.location = getContextPath() + "/user/details?id=" + id;

    }
</script>
</body>
</html>